<template>
  <div class="color-demo">
    <h3 class="title">色彩</h3>
    <div>
      <h5 class="sub-title">Primary</h5>
      <d-row :space="colorSpace" class="color-list">
        <d-col :width="6">
          <div class="bg-primary-color first">Primary</div>
          <d-row>
            <d-col :width="12">
              <div class="bg-primary2-color second"></div>
            </d-col>
            <d-col :width="12">
              <div class="bg-primary3-color second"></div>
            </d-col>
          </d-row>
        </d-col>
      </d-row>
      <h5 class="sub-title">基础色 / Basic Color</h5>
      <d-row :space="colorSpace" class="color-list">
        <d-col :width="6">
          <div class="bg-blue-color">Blue</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-green-color">Green</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-yellow-color">Yellow</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-red-color">Red</div>
        </d-col>
      </d-row>
      <h5 class="sub-title">文本 / Text</h5>
      <d-row :space="colorSpace" class="color-list dark-list">
        <d-col :width="6">
          <div class="bg-dark-color">Dark</div>
        </d-col>
      </d-row>
      <d-row :space="colorSpace" class="color-list dark-list">
        <d-col :width="6">
          <div class="bg-dark2-color">Dark2</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-dark3-color">Dark3</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-dark4-color">Dark4</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-dark5-color">Dark5</div>
        </d-col>
      </d-row>
      <h5 class="sub-title">背景色 / Background</h5>
      <d-row :space="colorSpace" class="color-list gray-list">
        <d-col :width="6">
          <div class="bg-gray-color">Gray</div>
        </d-col>
      </d-row>
      <d-row :space="colorSpace" class="color-list gray-list">
        <d-col :width="6">
          <div class="bg-gray2-color">Gray2</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-gray3-color">Gray3</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-gray4-color">Gray4</div>
        </d-col>
        <d-col :width="6">
          <div class="bg-gray5-color">Gray5</div>
        </d-col>
      </d-row>
    </div>
    <h3 class="title">应用</h3>
    <div>
      <p class="dark-color">Title</p>
      <p class="dark2-color">SubTitle</p>
      <p class="dark3-color">Description</p>
      <section>
        <p><a href="/">This is a Link.</a></p>
        <p>We have <span class="blue-color">blue</span>, <span class="green-color">green</span>,
          <span class="red-color">red</span>, <span class="yellow-color">yellow</span>.
        </p>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'colorDemo',
  data () {
    return {
      colorSpace: 12
    }
  }
}
</script>

<style lang="stylus" scoped>
.color-demo
  width 800px
  .color-list
    margin-bottom 35px !important
    &.gray-list, &.dark-list
      margin-bottom 6px !important
    &.gray-list
      .d-col > div
        color #34495e
    .d-col
      > div
        border-radius 3px
        padding 32px 20px
        color white
        &.d-row
          padding 0
        &.first
          border-radius 3px 3px 0 0
        &.second
          height 40px
          padding 0
          border-radius 0
</style>
